<template>
	<view class="">
		<loading ref="loading"></loading>
		<view class="" @touchmove.stop.prevent="a = false" @catchtouchmove="a = false">
			<view class="" v-if="detail.mode === 0">
				<image :src="detail.image" @load="play" style="height: 100vh;width: 100vw;display: flex;" mode="aspectFill"></image>
			</view>
			<view v-else-if="detail.mode === 1">
				<view class="bg_img" :style="{background: 'url('+detail.image+')',backgroundSize: 'cover'}"></view>
				<view class="u-flex u-row-center u-col-center" style="position: relative;height: 100vw;">
					<image :src="detail.image" @load="play" style="height: 60vw;width: 60vw;display: flex;border-radius: 24rpx;" mode="aspectFill"></image>
				</view>
			</view>
			<view class="" v-else-if="detail.mode === 2">
				<video style="width: 100vw;height: 100vh;" @play="play" :src="detail.video" :autoplay="true" :loop="true" :controls="false" :show-fullscreen-btn="false" :show-center-play-btn="false" :enable-progress-gesture="false" object-fit="cover" ></video>
			</view>
			
			<models v-show="adShow"
			:ad="true" 
			title="已成功保存到系统相册，别忘了分享给朋友也来下载哦！"
			btnText="分享给好友" 
			closeText="再想想看" 
			@save="adShow = false"
			@mask="adShow = false" 
			@close="adShow = false"></models>
		</view>
		<view class="openCss" :class="detail.mode===1?'bottom1':'bottom'">
			<view class="nav-box">
				<view class="nav-tab" @click="backClick">
					<u-icon name="/static/icon/back.png" :size="44"></u-icon>
					<text>返回</text>
				</view>
				<view class="nav-tab" @click="winClick">
					<u-icon name="/static/icon/duihuan.png" :size="42"></u-icon>
					<text>下载</text>
				</view>
				<!-- <view class="nav-tab" @click="deleteClick">
					<u-icon name="/static/icon/delete.png" :size="44"></u-icon>
					<text>删除</text>
				</view> -->
			</view>
		</view>
		
		<view class="" v-if="detail.mode === 1">
			<ad v-if="vk.getVuex('$setting.client.banner_id')" :unit-id="vk.getVuex('$setting.client.banner_id')" type="banner" ad-theme="black"></ad>
		</view>
	</view>
</template>

<script>
	let videoAd = null;
	var w = uni.getSystemInfoSync().windowWidth;
	var h = uni.getSystemInfoSync().windowHeight;
	export default {
		data() {
			return {
				detail: {},
				
				adShow: false,
				
				w: w,
				h: h,
			}
		},
		async onLoad({id}) {
			var that = this
			await that.getDetail(id)
		},
		methods: {
			async getDetail(id){
				var that = this
				let data = await that.vk.callFunction({
					url: 'client/wechat/list/kh/findId',
					data:{
						dbName: 'bus-wx-order',
						id: id
					}
				});
				that.detail = data.info
			},
			play(){
				var that = this
				that.$nextTick(() => {
					that.$refs.loading.closeLoading()
				})
			},
			winClick(){
				var that = this
				uni.showLoading({
					mask: true,
					title: '保存中...'
				})
				var url = ''
				if(that.detail.mode != 2) url = that.detail.image
				else url = that.detail.video
				var extension = url.substring(url.lastIndexOf('.') + 1)
				let fileName = new Date().valueOf();
				var downloadTask = uni.downloadFile({
					url: url,
					// #ifdef MP-WEIXIN
					filePath: wx.env.USER_DATA_PATH + '/' + fileName + '.' + extension,
					// #endif
					success: (res) => {
						// #ifdef MP-WEIXIN
						var benUrl = res.filePath
						// #endif
						// #ifndef MP-WEIXIN
						var benUrl = res.tempFilePath
						// #endif
						//图片保存到本地相册
						if(that.detail.mode != 2){
							uni.saveImageToPhotosAlbum({
								filePath: benUrl,
								//授权成功，保存图片
								success: function(data) {
									uni.hideLoading()
									that.adShow = true
								},
								//授权失败
								fail: function(err) {
									if (err.errMsg) {
										//重新授权弹框确认
										uni.showModal({
											title: '温馨提示',
											content: '打开相册权限后下载！',
											showCancel: false,
											success(res) {
												if (res.confirm) {
													uni.openSetting({
														success(settingdata) {}
													});
												}
											}
										});
									}
									uni.hideLoading()
								}
							});
						}else{
							//视频保存到本地相册
							uni.saveVideoToPhotosAlbum({
								filePath: benUrl,
								//授权成功，保存视频
								success: function(data) {
									uni.hideLoading()
									that.adShow = true
								},
								//授权失败
								fail: function(err) {
									if (err.errMsg) {
										//重新授权弹框确认
										uni.showModal({
											title: '提示',
											content: '无权限，请打开下载权限后再试！',
											showCancel: false,
											success(res) {
												if (res.confirm) {
													//重新授权弹框用户点击了确定
													uni.openSetting({
														//进入小程序授权设置页面
														success(settingdata) {
															if (settingdata.authSetting['scope.writePhotosAlbum']) {
																//用户打开了保存图片授权开关
																uni.saveVideoToPhotosAlbum({
																	filePath: benUrl,
																	success: function(data) {
																		uni.hideLoading()
																		that.adShow = true
																	}
																});
															} else {
																//用户未打开保存图片到相册的授权开关
																uni.showModal({
																	title: '温馨提示',
																	content: '授权失败，请稍后重新获取',
																	showCancel: false
																});
															}
														}
													});
												}
											}
										});
									}
									uni.hideLoading()
								}
							});
						}
					},
					fail: (error) => {
						console.log(error)
					}
				})
				
				if(that.detail.mode === 2){
					// #ifndef MP-TOUTIAO
					downloadTask.onProgressUpdate((res) => {
						var s = 100 / res.totalBytesExpectedToWrite
						var t = parseInt(res.totalBytesWritten * s)
						uni.showLoading({
							mask: true,
							title: '已下载'+t+'%...',
						})
					});
					// #endif
				}
			},
			backClick(){
				uni.navigateBack()
			},
			async deleteClick(){
				var that = this
				let data = await that.vk.callFunction({
					url: 'client/wechat/list/kh/delete',
					data:{
						dbName: 'bus-wx-order',
						id: that.detail._id
					}
				});
				uni.showToast({
					title: data.msg,
					mask: true,
					duration:1500
				});
				setTimeout(function(){
					uni.navigateBack()
				},1300)
			}
		}
	}
</script>
<style lang="scss" scoped>
	.bg_img{
		width: 100vw;
		height: 100vw;
		background-repeat: no-repeat;
		-webkit-filter: blur(15px);
		-moz-filter: blur(15px);
		-o-filter: blur(15px);
		-ms-filter: blur(15px);
		filter: blur(15px);
		position: absolute;
		left: 0;
		top: 0;
		opacity: 0.8;
	}
	.bottom {
		position: fixed;
		left: 4%;
		right: 0;
		width: 92%;
		height: 52px;
		box-shadow: 0 0px 8px rgba(31,31,31, 0.08);
		background: rgba(31,31,31, 0.95);
		border-radius: 49px;
		z-index: 10;
		opacity: 0.8;
	}
	.bottom1 {
		position: relative;
		left: 4%;
		right: 0;
		width: 92%;
		height: 52px;
		box-shadow: 0 0px 8px rgba(31,31,31, 0.08);
		background: rgba(31,31,31, 0.95);
		border-radius: 49px;
		z-index: 10;
		opacity: 0.8;
	}

	.nav-tab {
		position: relative;
		width: 100%;
		height: 52px;
		font-size: 12px;
		color: #D8D8D8;
		font-weight: 400;

		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.nav-box {
		/* position: absolute; */
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		width: 100%;
		box-sizing: border-box;
	}

	.openCss {
		animation-name: openLinear;
		// animation-duration: 0.8s;
		animation-iteration-count: 1;
		bottom: 40px;
	}

	@keyframes openLinear {
		0% {
			transform: translateY(92px);
		}
		100% {
			transform: translateY(0px);
		}
	}

	.closeCss {
		animation-name: closeLinear;
		animation-duration: 0.8s;
		animation-iteration-count: 1;
		bottom: -52px;
	}

	@keyframes closeLinear {
		0% {
			transform: translateY(-92px);
		}
		100% {
			transform: translateY(0px);
		}
	}
	
	.u-indicator-item-number {
		padding: 6rpx 16rpx;
		line-height: 1;
		background-color: rgba(0, 0, 0, 0.3);
		border-radius: 100rpx;
		font-size: 26rpx;
		color: rgba(255, 255, 255, 0.8);
	}
	.hover-class{
		transform:scale(0.95);
		transition: all 0.2s;
	}
</style>